import type { Meta, StoryObj } from "@storybook/react";
import { fn } from "@storybook/test";
import Tree, { TreeData } from "./Tree";
import { library } from "@fortawesome/fontawesome-svg-core";
import { faCoffee } from "@fortawesome/free-solid-svg-icons";
import { far } from "@fortawesome/free-regular-svg-icons";
import { fas } from "@fortawesome/free-solid-svg-icons";
library.add(fas, far);
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
const meta = {
  title: "components/Tree",
  component: Tree,
  parameters: {
    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
    layout: "centered",
  },
  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
  tags: ["autodocs"],
  // More on argTypes: https://storybook.js.org/docs/api/argtypes
  argTypes: {},
  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
  args: {},
} satisfies Meta<typeof Tree>;

export default meta;
type Story = StoryObj<typeof meta>;

export const TreeExample = {
  render: () => {
    const data = {
      name: "父亲",
      key: "1",
      type: "folder",
      collapsed: false,
      icon: faCoffee,
      children: [
        {
          name: "儿子1",
          key: "1-1",
          type: "folder",
          collapsed: false,
          children: [
            {
              name: "孙子1",
              key: "1-1-1",
              type: "folder",
              collapsed: false,
              children: [
                {
                  name: "重孙1",
                  key: "1-1-1-1",
                  type: "file",
                  collapsed: false,
                },
              ],
            },
          ],
        },
        {
          name: "儿子2",
          key: "1-2",
          type: "folder",
          collapsed: true,
        },
      ],
    };
    const requestData = async (key: string) => {
      return new Promise<TreeData[]>((resolve) => {
        setTimeout(() => {
          resolve([
            {
              name: data.name + "son1",
              key: `${data.key}-1`,
              type: "folder",
              collapsed: true,
            },
            {
              name: data.name + "son2",
              key: `${data.key}-2`,
              type: "folder",
              collapsed: true,
            },
          ] as TreeData[]);
        }, 1000);
      });
    };
    const select = (key: string) => {
      console.log(key);
    };
    return (
      <div style={{ minWidth: "500px" }}>
        <Tree
          data={data}
          requestData={requestData}
          onselect={select}
          selectKey="1-1-1"
          checkable
        ></Tree>
      </div>
    );
  },
};
